<template>
  <div class="bussiness-detail">
    <header-bar title="审批详情"></header-bar>
    <content-scroll>
      <div class="scroll-content">
        <group class="group basic-info">
        <div class="title-wrapper" slot="title">
          <div class="icon-wrapper">
            <icon name="document" :scale="2"></icon>
          </div>
          <h3 class="title">基本信息</h3>
        </div>

        <cell 
          v-for="(item, index) in infoCells" 
          :key="index"
          :title="item.title"
          :value="item.value">
        </cell>
      </group>

      <!-- 附件 -->
      <group class="group document">
        <div class="title-wrapper" slot="title">
          <div class="icon-wrapper">
            <icon name="document" :scale="2"></icon>
          </div>
          <h3 class="title">附件</h3>
        </div>
        <div class="file-item">
          <div class="icon-wrapper">
            <icon name="doc" :scale="3"></icon>
          </div>
          <h4 class="file-name">2017-11-21武汉出差申请.doc</h4>
        </div>
        <div class="file-item">
          <div class="icon-wrapper">
            <icon name="pdf" :scale="3"></icon>
          </div>
          <h4 class="file-name">2017-11-21武汉出差申请.pdf</h4>
        </div>
      </group>

      <!-- 审批 -->
      <group class="group comment" label-width="5em" aligin-items="right">
        <div class="title-wrapper" slot="title">
          <div class="icon-wrapper">
            <icon name="document" :scale="2"></icon>
          </div>
          <h3 class="title">基本信息</h3>
        </div>
        <popup-picker title="批示" placeholder="请选择批示" :data="commentOptions" v-model="commentResult" value-text-align="left"></popup-picker>
        <x-textarea placeholder="请填写批示" :show-counter="false" :rows="3" title="批示">
        </x-textarea>
      </group>

      <x-button class="submit-btn" @click.native="handleSubmit">提交</x-button>
      </div>
      
    </content-scroll>
  </div>
</template>

<script>
  import HeaderBar from '@/components/HeaderBar'
  import ContentScroll from '@/components/ContentScroll'
  import {Group, Cell, PopupPicker, XTextarea, XButton} from 'vux'

  export default {
    components: {
      HeaderBar,
      ContentScroll,
      Group,
      Cell,
      PopupPicker,
      XTextarea,
      XButton
    },
    data(){
      return {
        infoCells: [
          {
            title: '标题',
            value: '2017-12-21武汉出差申请'
          },
          {
            title: '申请人',
            value: '赵华科'
          },
          {
            title: '申请时间',
            value: '2017-12-15'
          },
          {
            title: '处理期限',
            value: '2017-12-20'
          },
          {
            title: '文件类型',
            value: 'doc pdf'
          },
          {
            title: '流转详情',
            value: '抄送至 黄组长'
          },
          {
            title: '任务编码',
            value: 'AMUV-2017110047'
          }
        ],
        commentOptions: [
          ['同意', '不同意', '取消']
        ],
        commentResult: []
      }
    },
    methods: {
      handleSubmit(){
        this.$vux.toast.text('提交成功', 'center')
        setTimeout(() => {
          this.$router.go(-1)
        }, 1000);
      }
    }
  }
</script>

<style lang="less" scoped>
  @import '~@/styles/mixin.less';
  @import '~@/styles/variables.less';

  .scroll-content{
    padding-bottom: 20px;
  }
  .bussiness-detail{
    background-color: @color-background-main;
  }
  .group{
    margin-top: 16px;
    .title-wrapper{
      display: flex;
      align-items: center;
      height: 40px;
      background-color: #fff;
      .icon-wrapper{
        display: flex;
        align-items: center;
      }
      .title{
        .group-title();
        font-weight: 600;
      }
    }
  }
  .document {
    .file-item{
      display: flex;
      align-items: center;
      margin: 12px 16px;
      padding: 12px 16px;
      border: 1px solid #ccc;
      .icon-wrapper{
        margin-right: 8px;
      }
    }
  }
</style>

